<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="../lib/js/jquery-3.3.1.min.js"></script>
    <script src="../lib/js/bootstrap.min.js"></script>
    <script src="../lib/js/thingjs.min-v1.2.2.4.js"></script>
    <script src="../lib/js/thing.widget.min.js"></script>

    <!--  <script src="./js/Cabinet.js"></script>-->

    <style>
        html, body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        header{
            position: absolute;
            z-index: 99;
            background-color: rgba(0, 0, 0, 0.35);
            /*width: 60px;*/
            /*height: 60px;*/
            margin-left: 95%;
            margin-top: 200px;
        }
        ul li{
            /*float: right;*/
            /*padding: 0 5px;*/
            list-style: none;
            cursor: pointer;

        }
        img{
            width: 60px;
        }

    </style>
</head>
<body>
<div id="3d">
    <header>
        <!--<div class="row">-->
        <!--<div class="col-md-6">-->
            <!--<ul class="ui">-->
                <!--<li attr-url="http://model.3dmomoda.cn/models/47f34ce2c5a14b6d8fd4e80974394a55/0/gltf/">-->
                    <!--<img src="http://model.3dmomoda.cn/models/47f34ce2c5a14b6d8fd4e80974394a55/3/screenshot.jpg" />-->
                <!--</li>-->
            <!--</ul>-->
         <!--</div>-->
        <!--</div>-->

        <div class="row">
            <div class="col-md-8">
            </div>
            <div class="col-md-4">
                <ul class="ui">
                    <li attr-url="http://model.3dmomoda.cn/models/47f34ce2c5a14b6d8fd4e80974394a55/0/gltf/">
                        <img src="http://model.3dmomoda.cn/models/47f34ce2c5a14b6d8fd4e80974394a55/3/screenshot.jpg" height="60px"/>
                    </li>
                    <li attr-url="http://model.3dmomoda.cn/models/58676E2C943D451885531A29D03664C1/0/gltf/">
                        <img src="http://model.3dmomoda.cn/models/58676E2C943D451885531A29D03664C1/6/screenshot.jpg"/>
                    </li>
                    <li attr-url="http://model.3dmomoda.cn/models/66479A712B314EDE8060C43CC16E362E/0/gltf/">
                        <img src="http://model.3dmomoda.cn/models/66479A712B314EDE8060C43CC16E362E/5/screenshot.jpg"/>
                    </li>
                </ul>
            </div>
        </div>
</header>
</div>

<!--保存场景id信息-->
<a type="text" style="visibility: hidden;" th:text="${scene.sId}" id="sId"  class="form-control"></a>
</body>
<script>

    <!--场景id-->
     var sId = $('#sId').text();
    console.log(sId);



    //加载场景
    app = new THING.App({
        container	: '3d',
        url			: './scene2',
        //loaderResourceUrl: './scene/models'
    });
    app.on('load', function (ev) {

        //进入建筑层级
        app.level.change(ev.campus);
        app.level.change(ev.buildings[0]);
        app.query('服务器').destroy();
        //    创建自己编辑的场景的对象
        createThing1();
        //暂停单击返回上一层级功能
        app.pauseEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackMethod);
        // 双击右键回到上一层级
        app.on(THING.EventType.DBLClick, function(ev) {
            if (ev.button !== 2) {
                return;
            }
            app.level.back();
        }, 'customLevelBackMethod');



    });





    function createThing1(){

        $.ajax({
            url: "/myModels",
            data: {"sId": sId},
            dataType: "json",   //返回的数据是json 格式
            type: "GET",
            success: function (data) {
            //    循环创建物体

                for (var index in data){
                    console.log(data[index]);
                    thing = app.create({
                        type: 'Thing',
                        url:data[index].mUrl,
                        position: [data[index].mPositionX, data[index].mPositionY, data[index].mPositionZ],

                    });
                    // console.log(data[index].mPositionY);
                    // console.log(data[index].mUrl);
                }
            }
        })
    }











    var _thing = false,// 新建的物体对象
        curObj,// 当前选中的物体
        _preSelThing = false;// 上一次选中的物体

    $(document).ready(function(){
        // 页面中绑定事件
        $('ul li').on('mousedown', function(){
            createThing($(this).attr('attr-url'));
        });
    })


    // 创建物体
    function createThing(url){


        //？？？？？？？？？？？？？？？？？？？
        _thing = app.create({
            type: 'Thing',
            url,
            position: [0, 0, 0]
        });

        // 防止拖动过程中获取时间坐标的时候，对位置进行重复拾取
        _thing.pickable = false;
        // 给对象绑定上选择事件
        _thing.on('singleclick', function (ev) {
            addControl(ev.object);
        }, 'newthing');
        // 关闭摄像机转动
        app.camera.enableRotate = false;
    }


    // 物体跟随鼠标移动
    app.on('mousemove', function (ev) {
        if (_thing) {
            var worldPosition = app.picker.pickWorldPosition(ev.clientX, ev.clientY);
            if (!worldPosition) {
                worldPosition = app.camera.screenToWorld(ev.clientX, ev.clientY);
            }
            _thing.position = worldPosition;
        }
    }, 'g');//--------------------------不一样



    function addControl(obj){
        curObj = obj;

        //点击下面一个物体时上面一个物体的控制轴消失
        if(_preSelThing){
            _preSelThing.removeControl('axisControl');
        }
        //没有控制轴的加一个
        if (!obj.hasControl('axisControl')) {
            obj.addControl(new THING.AxisTransformControl(obj), 'axisControl');
        }

        _preSelThing = obj;
    }

    // 鼠标抬起的操作,保存对象的修改
    app.on('mouseup', function (ev) {
        if (_thing) {
            // 重新让物体开启拾取
            _thing.pickable = true;
            if(_preSelThing){
                _preSelThing.removeControl('axisControl');
            }
            _preSelThing = _thing;
            _thing.addControl(new THING.AxisTransformControl(_thing), 'axisControl');
            save(_thing);
            _thing = false;
        }

        if(curObj){
            save(curObj);
        }
        //???????????????????????

        //开启摄像机转动
        app.camera.enableRotate = true;
    }, 'g')



    function save(obj){
        var data = {
            type		: obj.type,
            url			: obj.url,
            position	: obj.position,
            id			: obj.id
        }
        console.log('存储成功：', data);

        //将数据存储在数据库中

        $.ajax({
            url:"/saveModels",
            type:'post',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify({"mType":obj.type,"mUrl":obj.url,"mPositionX":obj.position[0],"mPositionY":obj.position[1],"mPositionZ":obj.position[2],"id":obj.id,"sId":sId}),
            async: true,
            success:function(data){
                // alert("保存成功");

            }
        });
    }



    // 鼠标右键点击取消所有控制轴
    app.on('mousedown', function (ev) {
        if (ev.button == 2) {
            if(_preSelThing){
                _preSelThing.removeControl('axisControl');
                curObj = false;
                _preSelThing = false;
            }
        }
    }, 'g');



    // 将原有的对象绑定click事件
    app.on('singleclick', '[type=Thing]', function(ev){
        addControl(ev.object);
    }, 'update')

    
</script>

</html>